<template>
  <div>
    <div class="item">
      <div class="cover cover-hover">
        <div class="cover-container" @click="$router.push({name:url,params:{vid:item.vid}})">
          <div class="shade">
             <button :style="{'width':'50px','height':'50px','transform':`scale(${num})`}" class="play-button" @click="toggle">
                <svg-icon icon-class="play" style="position: absolute;margin-left: 4px;cursor: default;"></svg-icon>
            </button>
          </div>
          <img :src="item.coverImgUrl" :class="[item.imgH?'imgHeight':'',item.circle?'circle':'']">
          <div class="shadow">
            <img :src="item.coverImgUrl" alt="" :class="[item.circle?'circle':'',item.imgH?'imgHeight':'']">
          </div>
        </div>
      </div>
      <div class="text">
        <div :class="['title',item.circle?'centerText':'']" style="font-size: 16px;">
          <a @click="$router.push({name:url,params:{vid:item.vid}})" class="">{{item.name}}</a>
        </div>
        <div class="info">
          <span >{{item.nickname}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlaymusicMusiclibraryitem',
  props: ['item', 'url'],
  data() {
    return {
      num: 1,
    };
  },
  mounted() {
  },
  methods: {
    toggle() {
      // eslint-disable-next-line no-console
      console.log(1);
    },
  },
};
</script>

<style lang="scss" scoped>
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.item{
    color: var(--color-text);
}
.cover{
    position: relative;
    transition: transform .3s;
}
.cover-container{
    position: relative;
}
.item{
  width:223px;
  img{
    border-radius: .75em;
    width:100%;
    height: 223px;
  }
}
.item .text .info, .item .text .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.item .text .title{
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    word-break: break-all;
}
.title a:hover{
  text-decoration: underline;
}
.item .text{
    margin-top: 8px;
}
.item .text .info{
    font-size: 12px;
    opacity: .68;
    line-height: 18px;
    word-break: break-word;
}
.item .text .info, .item .text .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.play-button{
    visibility:hidden;
    position: absolute;
    top: 42%;
    left: 41%;
    color: #fff;
    background: hsla(0,0%,100%,.14);
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 50%;
    cursor: default;
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-button:hover {
  background:rgba(225,225,225,.4);
}
.shadow{
    display: none;
    position: absolute;
    top: 12px;
    height: 100%;
    width: 100%;
    filter: blur(16px) opacity(.6);
    transform: scale(.92,.96);
    z-index: -1;
    background-size: cover;
    border-radius: .75em;
    aspect-ratio: 1/1;
}
.cover-container:hover{
  .play-button{
    visibility: inherit;
  }
  .shadow{
    display: block;
  }
}
.circle{
  border-radius: 50%!important;
  overflow: hidden;
}
.centerText{
  text-align: center;
}
.imgHeight{
  height:135px!important;
}
</style>
